<template>
	<view class="card p-30 d-flex">
		<text class="card_title mb-20">婚恋基础报告</text>
		
		<view class="list d-flex">
			<view :class="[index !== list.length - 1 ? 'mr-30' : '', 'list_item d-flex']" v-for="(item, index) of list" :key="index">
				<image src="/static/image/marriage/active.svg" mode="widthFix" class="list_item_icon mr-10" />
				<text class="list_item_title">{{ item }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
		
		const list = reactive(['婚姻状态', '申贷记录', '逾期记录', '法院案件'])
</script>

<style lang="scss" scoped>
		.card {
			.list {
				align-items: center;
				
				&_item {
					align-items: center;
					&_icon {
						width: 30rpx;
					}
					&_title {
						color: #FF0067;
						font: {
							size: 24rpx;
						}
					}
				}
			}
		}
</style>
